<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="UTF-8">
  <title>登录界面</title>
    <link href="../css/login.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="../js/number.js"></script>
	
	
</head>

<body class="one">
  <div class="forth">
	<a href="#">用户</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="/Admin/admintoLogin">管理员</a>
  </div>
<div class="two">
	<form action="/User/userlogin" onsubmit="return check()">
	<h1>欢迎登录</h1>
	<div class="three">
		<p><input type="text" size="35px"  placeholder="请输入账号" name="username" required style="height: 35px; background-color: rgba(0,0,0,0);"/></p>
		<p><input type="password" size="35px"  placeholder="请输入密码" name="password" required style=" height: 35px; background-color: rgba(0,0,0,0);"/></p>
		<p>
			<input type="text" id="vcode" placeholder="请输入验证码" value="请输入验证码" onfocus="this.value=''" onblur="if(this.value=='')this.value='验证码'" style="height: 35px; background-color: rgba(0,0,0,0);"/>
		</p>
		<p>
		    <span  id="code" title="请点击查看" style=" background-color: gainsboro; "></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="#code" id="code1">看不清换一张</a>
		</p>
	    <p>
		   <input type="submit" style="height: 35px; width: 300px; background-color: skyblue;" >
	    </p>
		<p><a href="/User/usertoRegister">没有账号，请点击注册！</a></p>
	</div>
</form>
 </div>

<script type="text/javascript">

	var code; //声明一个变量用于存储生成的验证码
	document.getElementById("code1").onclick = changeImg;
	function changeImg() {
		var arrays = new Array(
				'1', '2', '3', '4', '5', '6', '7', '8', '9', '0',

		);
		code = ''; //重新初始化验证码
		//alert(arrays.length);
		//随机从数组中获取四个元素组成验证码
		for(var i = 0; i < 4; i++) {
			//随机获取一个数组的下标
			var r = parseInt(Math.random() * arrays.length);
			code += arrays[r];
		}
		document.getElementById('code').innerHTML = code; //将验证码写入指定区域
	}

	//效验验证码(表单被提交时触发)
	function check() {
		//获取用户输入的验证码
		var input_code = document.getElementById('vcode').value;
		if(input_code.toLowerCase() == code.toLowerCase()) {
			//验证码正确(表单提交)
			return true;
		}
		alert("请输入正确的验证码!");
		//验证码不正确,表单不允许提交
		return false;
	}

</script>


</body>



</html>